<template>
	<view class="rescue_record">
		<view class="rescue_item">
			<view class="header">
				<view class="address">
					<view class="rescue_title" style="margin-bottom: 20rpx;">项目名称:
						<text style="color: #333;margin-left: 10rpx;">{{ buildingName ? buildingName : address }}</text>
					</view>
					<view class="rescue_title">电梯位置(补充)<text style="color: red;">*</text>:</view>
					<view @click="userClick" class="addressSelect">
						<text :style="{ color: elevatorAddress ? '#333333' : '' }">{{ elevatorAddress ? elevatorAddress :
							'请选择电梯位置'
						}}</text>
						<uni-icons :type="showPopups ? 'arrowup' : 'arrowdown'" size="16" color="#999;"></uni-icons>
					</view>
				</view>
				<view class="mode">
					<view class="rescue_title">救援方式<text style="color: red;">*</text>:</view>
					<view class="rescueMode">
						<view v-for="(item, index) in rescueMode" :key="index"
							:class="[formData.recueMode.includes(item.dictKey) ? 'select' : '', 'tag']"
							@click="choose(item, index)">
							{{ item.dictValue }}
						</view>
					</view>
					<view class="input_box" v-if="formData.recueModeValue.includes('其他')">
						<input v-model.trim="formData.recueModeRemark" type="text" placeholder="请输入其他救援方式" maxlength="20"
							@input="inputVal" />
						<view class="length">{{ formData.recueModeRemark.length + '/20' }}</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="remarks">
					<view class="notice">
						<view class="name">
							备注说明(选填):
						</view>
						<view class="area">
							<textarea v-model="formData.recueModeDesc" placeholder="请输入" placeholder-class="textare"
								@input="inputVal" style="font-size: 28rpx;height:150rpx;width: 100%;" maxlength="300"
								:always-embed="true" />
							<view class="length">{{ formData.recueModeDesc.length + '/300' }}</view>
						</view>
					</view>
					<view class="info_img">
						<image-drag-sort :max="9" @changeList="changeImg" :list="formData.imgUrl">

						</image-drag-sort>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		ImageDragSort,
	},
	props: {
		buildingName: {
			type: String,
			default: ''
		},
		rescueMode: {
			type: Array,
			default: ()=>[]
		},
		address: {
			type: String,
			default: ''
		},
		rescueSelectList: { // 下拉框
			type: Array,
			default: ()=>[]
		},
		showPopups: {
			type: Boolean,
			default: false
		},
		elevatorAddress: {
			type: String,
			default: ''
		}
	},
	created() {

	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	data() {
		return {
			formData: {
				recueModeRemark: '', // 救援方式 自定义输入
				imgUrl: [], // 备注照片、视频
				recueModeDesc: '', // 备注 文本域
				recueModeValue: [], // 救援方式 value
				recueMode: [], // 救援方式 key
			},
		};
	},
	methods: {
		// 下拉框
		userClick() {
			this.$emit('openSelect');
		},
		// 图片上传
		changeImg(imgArr) {
			this.formData.imgUrl = imgArr;
			this.$emit('getFormData', this.formData);
		},
		// 救援方式
		choose(item, index) {
			if (!this.formData.recueMode.includes(item.dictKey)) {
				this.formData.recueMode.push(item.dictKey);
				this.formData.recueModeValue.push(item.dictValue);
			} else {
				let faultIndex = this.formData.recueMode.findIndex(e => e == item.dictKey);
				this.formData.recueMode.splice(faultIndex, 1);
				this.formData.recueModeValue.splice(faultIndex, 1);
			}
			this.$emit('getFormData', this.formData);
		},
		// 输入框
		inputVal() {
			this.$emit('getFormData', this.formData);
		}
	}
};
</script>

<style lang="scss" scoped>
.rescue_record {
	.addressSelect {
		height: 72rpx;
		box-sizing: border-box;
		border: 1px solid #e9e9e9;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #cccccc;
		padding: 20rpx;
		display: flex;
		margin: 20rpx 0;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 670rpx;
	}

	.length {
		text-align: right;
		color: #ccc;
		font-size: 24rpx;
	}

	.rescue_item {
		padding: 0 10px;

		.header {

			.rescue_title {
				color: #999 !important;
				font-size: 28rpx;
			}

			.mode {
				.rescueMode {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.tag {
						width: 200rpx;
						border: 1px solid #ccc;
						color: #666;
						border-radius: 8rpx;
						text-align: center;
						padding: 6rpx 0;
						margin-top: 12rpx;
					}

					.select {
						border: 1px solid #0091ff;
						color: #0091FF;
					}
				}

				.rescueMode::after{
					content: "";
					flex: 1;
				}

				.input_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 36rpx;
					line-height: 36rpx;
					border: 1px solid #e9e9e9;
					border-radius: 8rpx;
					padding: 40rpx 20rpx;
					margin-top: 10rpx;
					font-size: 26rpx;
					width: 670rpx;
					box-sizing: border-box;

					input {
						width: 100%;
					}
				}
			}

		}

		.content {
			.remarks {
				.notice {
					width: 100%;
					padding-top: 32rpx;
					padding-bottom: 20rpx;

					.name {
						font-size: 26rpx;
						margin-bottom: 10rpx;
						color: #999999;
					}

					.area {
						box-sizing: border-box;
						width: 670rpx;
						padding: 20rpx;
						border: 2rpx solid #e9e9e9;
						border-radius: 8rpx;
					}
				}

				.info_img {
					margin-top: 20rpx;
				}
			}
		}
	}
}
</style>
